<template>
  <div class="app-container">
    <!-- 查询 -->
    <el-row>
      <el-col class="mb-2">
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button title="重置" @click="refresh()">重置
          <!-- <svg-icon icon-class="refresh" /> -->
        </el-button>
        <el-button type="primary" @click="visible = true">添加</el-button>
      </el-col>
    </el-row>

    <!-- 列表 -->
    <el-table
      ref="table"
      v-loading="loading"
      :data="data"
      :height="height"
      stripe
      highlight-current-row
    >
      <el-table-column prop="idkey" label="ID" width="80" sortable="custom" />
      <el-table-column prop="unique" label="支付类型" show-overflow-tooltip />
      <el-table-column prop="unique" label="应用id" show-overflow-tooltip />
      <el-table-column prop="name" label="商户id" show-overflow-tooltip />
      <el-table-column prop="unique" label="异步回调地址" show-overflow-tooltip />
      <el-table-column prop="unique" label="签名方式" show-overflow-tooltip />
      <el-table-column prop="tag_names" label="是否为测试环境" show-overflow-tooltip />
      <el-table-column prop="tag_names" label="创建时间" show-overflow-tooltip />
      <el-table-column label="操作" width="95" fixed="right">
        <template #default="scope">
          <el-link type="primary" class="mr-1" :underline="false" @click="edit(scope.row)">
            修改
          </el-link>
          <el-link type="primary" :underline="false"> 删除 </el-link>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页 -->
    <pagination
      v-show="count > 0"
      v-model:total="count"
      v-model:page="query.page"
      v-model:limit="query.limit"
      @pagination="list"
    />

    <el-dialog
      v-model="visible"
      title="Tips"
      width="30%"
      :before-close="
        (done) => {
          ElMessageBox.confirm('是否关闭?')
            .then(() => {
              done()
            })
            .catch(() => {
              // catch error
            })
        }
      "
    >
      <el-form
        label-width="160px"
        :rules="{
          test1: [{ required: true, message: '请选择', trigger: 'blur' }],
          test2: [{ required: true, message: '请选择', trigger: 'blur' }],
          test3: [{ required: true, message: '请输入应用id', trigger: 'blur' }],
          test11: [{ required: true, message: '请输入异步回调地址', trigger: 'blur' }],
          test13: [{ required: true, message: '请选择签名方式', trigger: 'blur' }]
        }"
      >
        <el-form-item label="支付类型(支付渠道)" prop="test1">
          <el-select v-model="test1" placeholder="请选择" clearable>
            <el-option key="1" value="1" label="支付宝支付" />
            <el-option key="2" value="2" label="微信支付" />
          </el-select>
        </el-form-item>
        <el-form-item label="支付id" prop="test2">
          <el-select v-model="test2" placeholder="请选择" clearable>
            <el-option key="1" value="1" label="微信支付H5" />
            <el-option key="2" value="2" label="支付宝H5" />
          </el-select>
        </el-form-item>
        <el-form-item label="应用id" prop="test3">
          <el-input v-model="model.tes3" placeholder="请输入应用id" clearable />
        </el-form-item>
        <el-form-item label="微信商户id" prop="test4">
          <el-input v-model="model.test4" placeholder="请输入微信商户id" clearable />
        </el-form-item>
        <el-form-item label="支付宝商户id" prop="test5">
          <el-input v-model="model.test5" placeholder="请输入支付宝商户id" clearable />
        </el-form-item>
        <el-form-item label="证书存储类型" prop="test6">
          <el-select v-model="test1" placeholder="请选择" clearable>
            <el-option key="1" value="1" label="PATH" />
          </el-select>
        </el-form-item>
        <el-form-item label="私钥或私钥证书" prop="test7">
          <el-input v-model="model.test5" placeholder="请输入私钥或私钥证书" clearable />
        </el-form-item>
        <el-form-item label="公钥或公钥证书" prop="test8">
          <el-input v-model="model.test5" placeholder="请输入公钥或公钥证书" clearable />
        </el-form-item>
        <el-form-item label="key证书" prop="test9">
          <el-input
            v-model="model.test5"
            placeholder="key证书,附加证书使用,如SSl证书,或者银联根级证书方面"
            clearable
          />
        </el-form-item>
        <el-form-item label="证书密码" prop="test10">
          <el-input v-model="model.test" placeholder="请输入私钥正式或key证书的密码" clearable />
        </el-form-item>
        <el-form-item label="异步回调地址" prop="test11">
          <el-input v-model="model.test" placeholder="请输入异步回调地址" clearable />
        </el-form-item>
        <el-form-item label="同步回调地址" prop="test12">
          <el-input
            v-model="model.test"
            placeholder="请输入同步回调地址,大部分用户付款成功后页面跳转"
            clearable
          />
        </el-form-item>
        <el-form-item label="签名方式" prop="test13">
          <el-select v-model="test2" placeholder="请选择签名方式MD5,RSA等" clearable>
            <el-option key="1" value="1" label="RSA" />
            <el-option key="2" value="2" label="RSA2" />
            <el-option key="3" value="3" label="MD5" />
          </el-select>
        </el-form-item>
        <el-form-item label="子appId" prop="test14">
          <el-input v-model="model.tes3" placeholder="请输入子appId" clearable />
        </el-form-item>
        <el-form-item label="子商户Id" prop="test15">
          <el-input v-model="model.test4" placeholder="请输入子商户Id" clearable />
        </el-form-item>
        <el-form-item label="是否为测试环境" prop="test20">
          <el-radio-group v-model="model.test10" class="ml-4">
            <el-radio label="1" size="large">是</el-radio>
            <el-radio label="2" size="large">否</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="visible = false">取消</el-button>
          <el-button type="primary" @click="visible = false">提交</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import screenHeight from '@/utils/screen-height'
import { getPageLimit } from '@/utils/settings'
import { list } from '@/api/content/content'

export default {
  name: 'ConfigPayIndex',
  components: {},

  data() {
    return {
      data: [],
      loading: false,
      height: 680,
      count: 0,
      query: {
        page: 1,
        limit: getPageLimit()
      },
      visible: false,
      model: {}
    }
  },
  created() {
    this.height = screenHeight()
  },
  methods: {
    // 列表
    list() {
      this.loading = true
      // list(this.query)
      //   .then((res) => {
      //     this.data = res.data.list
      //     this.count = res.data.count
      //     this.loading = false
      //   })
      //   .catch(() => {
      //     this.loading = false
      //   })
    },
    edit(e) {}
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-radio.el-radio--large {
  height: 32px;
}
</style>
